<div class="register-container " data-hook="">
  <div id="content" class="col-sm-12 loginwindow" data-hook="">
    <div class="col-md-5 col-centered">
      <div class="panel panel-default" *ngIf="passwordReset === false">
        <div class="panel-heading">
          <h3 class="panel-title" *ngIf="passwordReset === false">
            Update Password
          </h3>
        </div>
        <div id="existing-customer" class="panel-body" data-hook="login">
          <form
            class="register-register-form"
            novalidate=""
            [formGroup]="updatePasswordForm"
            (ngSubmit)="onSubmit()"
          >
            <fieldset class="register-input-container">
              <div class="register-input-item">
                <input
                  type="password"
                  class="register-user-input-password register-user-input"
                  name="password"
                  formControlName="password"
                  placeholder="Choose New Password"
                  autocomplete="off"
                />
                <div
                  *ngIf="
                    updatePasswordForm.get('password').errors &&
                    updatePasswordForm.get('password').touched
                  "
                >
                  <span class="register-error-icon">!</span>
                  <p class="register-error-message">
                    {{
                      updatePasswordForm.get('password').errors.msg ||
                        'Password must be at least 6 characters'
                    }}
                  </p>
                </div>
              </div>

              <div class="register-input-item">
                <input
                  type="password"
                  class="register-user-input-password register-user-input"
                  name="password_confirmation"
                  formControlName="password_confirmation"
                  placeholder="Confirm Password"
                  autocomplete="off"
                />
                <div
                  *ngIf="
                    (updatePasswordForm.get('password_confirmation').errors ||
                      updatePasswordForm.hasError('mismatchedPasswords')) &&
                    updatePasswordForm.get('password_confirmation').touched
                  "
                >
                  <span class="register-error-icon">!</span>
                  <p class="register-error-message">
                    {{ 'Password must match' }}
                  </p>
                </div>
              </div>
            </fieldset>
            <fieldset class="register-register-button-container">
              <button class="btn  register-register-button">
                Update Password!
              </button>
            </fieldset>
          </form>
        </div>
        <div
          id="existing-customer"
          class="panel-body"
          data-hook="login"
          *ngIf="passwordReset === true"
        >
          <span>Password has been changed sucessfully!</span>
          <span>
            Click
            <a [routerLink]="['/auth/login']">here</a>for login.
          </span>
        </div>
      </div>
      <div class="" *ngIf="passwordReset === true">
        <div class="panel-heading">
          <img
            src="../../../../assets/custom/check.png"
            class="img-fluid my-4 h-50"
          />
          <h3 class="panel-title" *ngIf="passwordReset === true">
            Password Changed!
          </h3>
        </div>

        <div id="existing-customer" class="panel-body" data-hook="login">
          <span>Password has been changed sucessfully!</span>
          <span>
            Click
            <a [routerLink]="['/auth/login']">here</a>for login.
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
